<template>
  <div>
    <el-form :inline="true" class="user-search">
      <el-form-item label="房型名称">
        <el-checkbox v-model="name" clearable></el-checkbox>
      </el-form-item>

      <el-form-item label="选择日期">
        <el-time-picker is-range v-model="timeHorizon" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"
          placeholder="选择时间范围" clearable>
        </el-time-picker>
      </el-form-item>


      <el-form-item label="房态状态">
        <el-radio v-model="state" label="1">不做改变</el-radio>
        <el-radio v-model="state" label="2">房间开放</el-radio>
        <el-radio v-model="state" label="3" clearable>房间关闭</el-radio>
      </el-form-item>

      <el-form-item label="设置保留房">
        <el-radio v-model="reservingRoom" label="1">不做改变</el-radio>
        <el-radio v-model="reservingRoom" label="2">增加
          <el-input-number v-model="num1" controls-position="right" @change="handleChange" :min="1" :max="10">间</el-input-number>
        </el-radio>
        <el-radio v-model="reservingRoom" label="3">减少
          <el-input-number v-model="num2" controls-position="right" @change="handleChange" :min="1" :max="10">间</el-input-number>
        </el-radio>
        <el-radio v-model="reservingRoom" label="3">设为
          <el-input-number v-model="num3" controls-position="right" @change="handleChange" :min="1" :max="10" clearable>间</el-input-number>
        </el-radio>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogMergeFormVisible">取 消</el-button>
      <el-button type="primary" @click="doSubmit">确 定</el-button>
      <el-input type="hidden" v-model="mergeForm.id"></el-input>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: null,
        timeHorizon: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        state: null,
        reservingRoom: {
          num1: 1,
          num2: 1,
          num3: 1
        }
      }
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    },
    created() {
      this.list()
    }
  }
</script>

<style>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .block {
    margin-top: 20px;
    text-align: right;
  }

  .disabled {
    font-size: 17px;
  }
</style>
